<template>
  <common-page>
    <div slot="content" class="user-profile-wrap">
      <userInfo :user="user" @refresh="getUser"/>
    </div>
  </common-page>
</template>

<script>
import userInfo from './userInfo'
import { getUserProfile } from '@/api/person/index'
import Utils from '@/utils'
import { decode, encode } from '@/utils/aesUtils'

export default {
  name: 'Profile',
  components: { userInfo },
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getJsonStr(arr = [], key) {
      let str = []
      arr.map(v => {
        str.push(v[key])
      })
      return str.join('，')
    },
    getUser() {
      getUserProfile().then((response) => {
        this.user = Object.assign({}, response.user, {
          remark: this.getJsonStr(response.user.roles, 'roleName'),
          deptFullNameArr: response.user.deptFullNameArr && response.user.deptFullNameArr.length ? response.user.deptFullNameArr.join('，') : '',
          encodePhone: response.user.phonenumber ? Utils.phoneEncryption(decode(response.user.phonenumber)) : '',
          encodeEmail: response.user.email ? Utils.emailEncryption(decode(response.user.email)) : '',
          permissionName: response.user.permissionList && response.user.permissionList.length ? this.getJsonStr(response.user.permissionList, 'permissionName') : '',
        })
      })
    }
  }
}
</script>
<style lang="scss">
.user-profile-wrap {
  width: 100%;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;
}
</style>
